<template>
  <MenuPage 
  :columns="projectCol" 
  :data="projectList"
  :total="proTotal"
  :page.sync="proPage"
  :size.sync="proPageSize"
  @queryFun="getProjectList">
    <template slot="search">
      <Input
        style="width: 180px;margin-right: 15px"
        v-model.trim="searchSceneName"
        clearable
        @on-change="searchName"
        enter-button="搜索"
        placeholder="应用名称"
      />
      <Button @click="refreshTem"><i class="el-icon-refresh-right"/></Button>
    </template>
</MenuPage>
</template>
<script>
import $ from 'jquery';
import {
  projectList
} from '@/api/referee.js';

// import DeclareTargetDrawer from './declareTargetDrawer';
export default {
  components: {  },
  data() {
    return {
      // 工程列表
      proPage: 1,
      proPageSize: 12,
      projectList: [],
      proTotal: 0,
      projectCol: [
        //                  {
        //                      type:'index',
        //                      width:60,
        //                  },
        {
          title: '应用名称',
          key: 'name',
          minWidth: 120,
          placement: 'top-left',
          render: (h, params) => {
            return h(
              'Tooltip',
              {
                props: {
                  content: params.row.name,
                  placement: 'top-start'
                },
                style: {}
              },
              [
                h(
                  'a',
                  {
                    class: 'text-ellipsis',
                    style: {
                      width: '400px'
                    },
                    on: {
                      click: () => {
                        this.toDetailPage(params.row);
                      }
                    }
                  },
                  params.row.name
                )
              ]
            );
          }
        },
        {
          title: '类型',
          key: 'type',
          width: 120,
          placement: 'top-left',
          render: (h, params) => {
            // let text = '';
            // if (params.row.type === 0) {
            //   text = '对抗演练';
            // } else if (params.row.type === 1) {
            //   text = '攻防赛';
            // } else if (params.row.type === 2) {
            //   text = '夺旗赛';
            // } else if (params.row.type === 3) {
            //   text = '知识赛';
            // } else if (params.row.type === 4) {
            //   text = '渗透演练';
            // } else if (params.row.type === 5) {
            //   text = '护网';
            // }
            return h('span', this.typeFilter(params.row.type,params.row));
          }
        },
        {
          title: '工程名称',
          key: 'projectname',
          width: 180,
          tooltip: true
        },
        {
          title: '开始时间',
          key: 'starttime',
          width: 200,
          sortable: true, //开启排序
          sortType: 'desc' //初始化排序
        },
        {
          title: '结束时间',
          key: 'endtime',
          width: 200
        },
        {
          title: '创建者',
          key: 'creatorName',
          width: 100,
          tooltip: true
        },
        {
          title: '选手行为监控',
          key: 'monitor',
          placement: 'top-right',
          render: (h, params) => {
            let isDailyDrill = false // 是否为日常渗透
            const extension = JSON.parse( params.row.extension)
            if(extension.hwType==0&&extension.hwExtentionType==2){
              isDailyDrill = true
            }
            return h('Button', {
              props: {
                type: 'info',
                ghost: true
              },
              style: {
                display: isDailyDrill?'none':'inline-block'
              },
              on: {
                click: () => {
                  this.toMonitoring(params.row)
                }
              }
            }, '选手行为监控');
          }
        },
      ],
      searchSceneName: ''
    };
  },
  computed: {
    pageTitle () {
      //当前菜单显示名
      return this.$store.getters.pageTitle;
    },
    emergencyDefenseDrill () { // 应急
       return this.$store.getters.getMenuName('emergencyDefenseDrill');
    },
    awdDrill () { // 对抗
       return this.$store.getters.getMenuName('awdDrill');
    },
    stDrill () { // 渗透
      return this.$store.getters.getMenuName('stDrill');
    },
    multipleDrill () { // 综合
      return this.$store.getters.getMenuName('multipleDrill');
    },
    hwDrill () { // 实网
      return this.$store.getters.getMenuName('hwDrill');
    },
    swDrill () { // 旧护网
      return this.$store.getters.getMenuName('swDrill');
    },
    awdContest () { // 攻防
      return this.$store.getters.getMenuName('awdContest');
    },
    awdPlusContest () { // 攻防Plus
      return this.$store.getters.getMenuName('awdPlusContest');
    },
    ctfContest () { // 夺旗
      return this.$store.getters.getMenuName('ctfContest');
    },
    opContest () { // 运维
      return this.$store.getters.getMenuName('opContest');
    },
    kcContest () { // 知识
      return this.$store.getters.getMenuName('kcContest');
    },
    zcDrill () { // 众测
      return this.$store.getters.getMenuName('zcDrill');
    },
    fzDrill () { // 仿真
      return this.$store.getters.getMenuName('fzDrill');
    },
    dailyDrill () { // 日常
      return this.$store.getters.getMenuName('dailyDrill');
    },
    bigDrill(){ // 大型
      return this.$store.getters.getMenuName('bigDrill');
    },
  },
  created() {},
  watch: {
    
  },
  mounted() {
    // 调用工程列表
    this.getProjectList();
  },
  methods: {
    // 选手监控
    toMonitoring (row) {
      console.log(' toMonitoring ~ row:', row)
      this.$router.push({
        name: 'monitoring',
        query: {
          sceneName: row.name,
          endtime: row.endtime,
          starttime: row.starttime,
          id: row.id,
          prjid: row.projectid,
          type:'referee'
        }
      });

    },
    // 获取团队或者是目标的名称
    sceneStatusFilter(val) {
      switch (val) {
        case 'error':
          return '已停止';
        case 'initialized':
          return '初始化';
        case 'running':
          return '运行中';
        case 'completed':
          return '已完成';
        default:
          return '未知状态';
      }
    },
    // 获取工程列表
    getProjectList() {
      let params = {
        page: this.proPage,
        pageSize: this.proPageSize
      };
      if (this.searchSceneName != '') {
        params.name = this.searchSceneName;
      }
      projectList(params)
        .then((res) => {
          if (res.data.code === 1) {
            this.projectList = res.data.data.pageData;
            this.proTotal = res.data.data.totalCount;
          }
        })
        .catch((err) => {});
    },
    // 过滤
    changePageNum(val) {
      this.proPage = val;
      this.getProjectList();
    },
    searchName(val) {
      this.searchSceneName = this.searchSceneName;
      this.getProjectList();
    },
    refreshTem() {
      this.proPage = 1;
      this.searchSceneName = '';
      this.getProjectList();
    },
    // 设置工程状态颜色
    setColor(status) {
      let obj = {
        color: '',
        text: ''
      };
      switch (status) {
        case 0: // 未部署
          obj.color = '#888';
          obj.text = '未部署';
          return obj;
          break;
        case 3: // 部署成功
          obj.color = '#06b649';
          obj.text = '部署成功';
          return obj;
          break;
        case 4: // 删除中
          obj.color = '#ff4242';
          obj.text = '删除中';
          return obj;
          break;
        case 6: // '部署失败'
          obj.color = '#ff4242';
          obj.text = '部署失败';
          return obj;
          break;
        case 8: // '删除失败'
          obj.color = '#fa9901';
          obj.text = '删除失败';
          return obj;
          break;
        case 9: // '部署中'
          obj.color = '#06b649';
          obj.text = '部署中';
          return obj;
          break;
        case 12: // '待删除'
          obj.color = '#888';
          obj.text = '待删除';
          return obj;
          break;
        case 13: // '清空部署中'
          obj.color = '#ff8244';
          obj.text = '清空部署中';
          return obj;
          break;
        case 14: // '清空部署失败'
          obj.color = '#ff8244';
          obj.text = '清空部署失败';
          return obj;
          break;
        case 16: // '工程导入中'
          obj.color = '#088cf0';
          obj.text = '工程导入中';
          return obj;
          break;
        case 17: // '工程导入失败'
          obj.color = '#cb0236';
          obj.text = '工程导入失败';
          return obj;
          break;
      }
    },
    // 任务列表
    toDetailPage(row) {
      
      
      
      this.$router.push({
        name: 'refereeDetail',
        query: {
          sceneName: row.name,
          sceneId: row.id,
          projectId: row.projectid,
          projectName: row.projectname,
          projectType:this.typeFilter(row.type,row)
        }
      });
    },
    closeDistribution() {
      this.taskModel = false;
    },
    // 告警信息列表
    toAlarmPage(row) {
      this.alarmName = row.name;
      this.alarmId = row.id;
      this.getAlarmList();
      this.alarmModel = true;
    },
    closeAlarmModel() {
      this.alarmName = '';
      this.alarmPage = 1;
      this.alarmId = '';
      this.teamName = '';
      this.sceneRist = 'all';
      this.alarmModel = false;
    },
    resetSearchAlarm() {
      this.teamName = '';
      this.sceneRist = 'all';
      this.alarmPage = 1;
      this.alarmPageSize = 12;
      this.getAlarmList();
    },
    changeAlarmPageNum(val) {
      this.alarmPage = val;
      this.getAlarmList();
    },
    changeSceneRist(val) {
      this.sceneRist = val;
      this.getAlarmList();
    },
    searchTeamName() {
      this.getAlarmList();
    },
    getAlarmList() {
      let params = {
        pageIndex: this.alarmPage,
        pageSize: this.alarmPageSize,
        relativeld: this.alarmId
      };
      if (this.sceneRist != 'all') {
        params.risk = this.sceneRist;
      } else {
        delete params.risk;
      }
      if (this.teamName) {
        params.teamName = this.teamName;
      } else {
        delete params.teamName;
      }
      getAlarmList(params)
        .then((res) => {
          if (res.data.code == 1) {
            this.alarmList = res.data.data.items;
            this.alarmTotal = res.data.data.total;
          } else {
            this.alarmList = [];
            this.alarmTotal = 0;
          }
        })
        .catch((error) => {
          this.$Message.error(error);
        });
    },
    downloadReport(scene) {
      let sceneId = scene.id;
      let sceneName = scene.name;
      let href = `/api/compete/scoring/exportReport/${sceneId}/${sceneName}`;
      let a = document.createElement('a');
      document.body.appendChild(a);
      a.href = href;
      a.download = ''; //命名下载名称
      a.click(); //点击触发下载
      a.remove();
    },
    typeFilter (val,item) {
      //0.对抗演练、1.攻防赛、2夺旗赛、3知识赛、4渗透演练
      let str = '';
      switch (val.toString()) {
        case '0':
          // str = '对抗演练';
          str = this.awdDrill;
          break;
        case '1':
          // str = '攻防赛';
          str = this.awdContest;
          break;
        case '2':
          // str = '夺旗赛';
          str = this.ctfContest;
          break;
        case '3':
          // str = '知识赛';
          str = this.kcContest;
          break;
        case '4':
          // str = '渗透演练';
          str = this.stDrill;
          break;
        case '5':
          // str = '护网演练';
            const extension = JSON.parse( item.extension)
            if(extension.hwType==0&&extension.hwExtentionType==2){ // 日常
              str = this.dailyDrill
            }else if(extension.hwType==0&&extension.hwExtentionType==3){ //大型
              str = this.bigDrill
            }else if(extension.hwType==2&&extension.vpn){ // 众测
              str = this.zcDrill
            }else if(extension.hwType==1){ // 实网
              str = this.hwDrill;
            }else if(extension.hwType == 3){ // 仿真
              str = this.fzDrill;
            } else{
              str = this.swDrill;
            }
          break;
        case '6':
          // str = '应急防御演练';
          str = this.emergencyDefenseDrill;
          break;
        case '7':
          // str = '综合演练';
          str = this.multipleDrill;
          break;
        case '8':
          // str = '攻防赛Plus';
          str = this.awdPlusContest;
          break;
        case '9':
          // str = '运维赛';
          str = this.opContest;
          break;
        case '10':
          // str = '应急防御演练';
          str = this.emergencyDefenseDrill;
          break;
        default:
          break;
      }
      return str;
    }
  }
};
</script>
<style scoped>
</style>
